<template>
  <div class="flex-block">
    <div class="top-block">
      <Header></Header>
      <Header2 />
      <div class="top-nav-block">
        <div class="nav-place">
          <router-link to="/city">
            厦门
            <img width="10" src="@/assets/xiajiantou.png" alt="" />
          </router-link>
        </div>
        <div class="nav-list">
          <router-link :to="'reying'">热映</router-link>
        </div>
        <div class="nav-list"><router-link to="cinema">影院</router-link></div>
        <div class="nav-list"><router-link to="wait">待映</router-link></div>
        <div class="nav-list">
          <router-link to="classic">经典电影</router-link>
        </div>
        <div class="search-red">
          <img src="@/assets/search-red.png" alt="" />
        </div>
      </div>
    </div>
    <router-view ref="body" class="body" ></router-view>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Header2 from "@/components/Header2.vue";
export default {
  name: "movie",
  components: {
    Header,
    Header2,
  },
  mounted() {
    this.$refs.body.addEventListener("scroll", this.handleScroll);
  },
};
</script>

<style>
.flex-block {
  display: flex;
  flex-direction: column;
}
.top-block {
  width: 100%;
}

.body {
  flex: 1;
  overflow-y: auto;
}
</style>

<style scoped>
a {
  color: #666;
}
.top-nav-block {
  width: 100%;
  height: 1.1735rem;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

.top-nav-block {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.top-nav-block div {
  font-size: 14px;
  color: #666;
}

.top-nav-block .nav-list {
  font-weight: bold;
}

.top-nav-block .nav-list a {
  text-decoration: none;
  color: #666;
}

.top-nav-block .search-red {
  width: 20px;
  height: 20px;
}

.top-nav-block .search-red img {
  width: 100%;
}

.top-nav-block .icon-xiajiantou {
  font-size: 8px;
}

.nav-list a.router-link-exact-active {
  color: #333;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 3px solid #f03d37;
  padding-bottom: 5px;
}
</style>
